<template>
    <div class="container-login">
        <div class="container-login-item">
            <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto"
                class="demo-ruleForm login-box" :size="formSize" status-icon>
                <el-form-item class="login-item">
                    <input class="login-row" type="text" autocomplete="off" placeholder="请输入用户名" maxlength="10"
                        v-model="form.userName" @input="handleInput" />
                </el-form-item>
                <el-form-item class="login-item">
                    <input class="login-row" type="password" autocomplete="off" placeholder="请输入密码" maxlength="10"
                        v-model="form.password" @input="handleInput" />
                </el-form-item>
                <el-form-item class="login-item">
                    <button class="login-btn" type="primary" @click.prevent="login()">登录</button>
                </el-form-item>
                <el-form-item class="login-item">
                    <p class="login-p">还没账号？<a href="/Register">立即注册</a></p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup name="Login">
import { ref } from 'vue';
import service from '@/utils/request';
import { useRouter } from 'vue-router';
const router = useRouter();

const form = ref([{
    userName: '',
    password: '',
}]);
const login = () => {
    if (!checkData()) {
        return;
    }
    service({
        url: 'api/Auth/login',
        method: 'post',
        data: {
            userName: form.value.userName.trim(),
            password: form.value.password.trim(),
        }
    }).then(res => {
        if (res != undefined && res.status == 200) {
            window.localStorage.setItem('token', res.data);
            window.localStorage.setItem('loginTime', new Date().getTime());
            window.localStorage.setItem('navigationBar', JSON.stringify('首页'));
            router.push('/home');
            ElMessage({
                message: '登录成功!',
                type: 'success',
                plain: true,
            });
        }
    });
};
const checkData = () => {
    if (form.value.userName == undefined || form.value.password == undefined) {
        ElMessage({
            message: '请输入用户名或密码',
            type: 'error',
            plain: true,
        });
        return false;
    } else {
        const name = form.value.userName.trim();
        const password = form.value.password.trim();
        if (name == '' || name == null) {
            ElMessage({
                message: '请输入用户名',
                type: 'error',
                plain: true,
            });
            return false;
        }
        if (password == '' || password == null) {
            ElMessage({
                message: '请输入密码',
                type: 'error',
                plain: true,
            });
            return false;
        }
    }
    return true;
}

const handleInput = (event) => {
    event.target.style.color = 'white';
}
</script>

<style scoped>
.container-login {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

.container-login-item {
    display: block;
    width: 100%;
    height: 100%;
    align-content: center;
    background: url('@/assets/imag/R-C.png') no-repeat;
    background-size: 100% 100%;
}

.login-box {
    margin: 0 10%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.login-item {
    margin: 0;
    padding: 0;
    width: 100%;
}

.login-row {
    margin: 10px auto;
    width: 80%;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    color: rgb(109 117 117);
    background-color: rgba(82, 91, 117, 0.6);
    border: 1px solid rgb(0 0 0);
    outline: none;
}

.login-btn {
    margin: 10px auto;
    width: 80%;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    color: white;
    background-color: rgb(143 243 245);
    border: 1px solid rgb(143 243 245);
    outline: none;
}

.login-p {
    margin: 10px auto;
    width: 80%;
    height: 30px;
    text-align: center;
    color: rgb(109 117 117);
}

a {
    text-decoration: none;
}
</style>